<!-- 层架模版 -->
<template>
  <el-form :model="shelfRuleForm" :rules="shelfRules" ref="shelfRuleForm" label-width="130px" size="mini"
    class="demo-ruleForm">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-form-item label="模版样式" prop="templateName" class="labelWidth">
          <el-radio-group v-model="shelfRuleForm.templateStyle">
            <el-radio :label="0">横版</el-radio>
            <el-radio :label="1">竖版</el-radio>
            <el-radio :label="2">方正版</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="shelfFields" class="fieldsTable">
          <div class="draggable">
            <el-table row-key="pieceId" :data="shelfRuleForm.shelfFields" border style="width: 100%" height="55vh">
              <el-table-column prop="pieceId" label="数据块" width="">
                <template #default="scope">
                  <el-select :ref="'shelf' + scope.row.pieceId" v-model="scope.row.fieldId" placeholder="请选择"
                    @change="(e) => selectShelfChange(e, scope.row)" clearable>
                    <el-option v-for="item in shelfFieldOptions" :key="item.fieldId" :label="item.fieldTitle"
                      :value="item.fieldId" :disabled="shelfHasList.includes(item.fieldId)">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="nameSeparator" label="数据块名称分隔符" width="">
                <template #default="scope">
                  <el-input v-model="scope.row.nameSeparator" placeholder="请输入数据块名称分隔符" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="nameFormat" label="数据块名称数字样式" width="">
                <template #default="scope">
                  <el-input v-model="scope.row.nameFormat" placeholder="请输入数据块名称数字样式" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="fieldTitle" label="数据块名称" width="">
                <template #default="scope">
                  <el-input v-model="scope.row.fieldTitle" placeholder="请输入数据块名称" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="codeSeparator" label="数据块编码分隔符" width="">
                <template #default="scope">
                  <el-input v-model="scope.row.codeSeparator" placeholder="请输入数据块编码分隔符" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="codeFormat" label="数据块编码数字样式" width="">
                <template #default="scope">
                  <el-input v-model="scope.row.codeFormat" placeholder="请输入数据块编码数字样式" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini"
                    @click="deleteShelf(row)"></el-button>
                  <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addShelf()"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="模版示例：" class="example">
          <div>
            <download-file buttonText="下载打印模版" :templateId="shelfRuleForm.templateStyle"></download-file>
            <upload-file buttonText="上传打印模版" :templateId="shelfRuleForm.templateStyle"></upload-file>
          </div>
          <span class="beCareful_text">*模版示例仅供参考，具体请以实际为准</span>
          <el-skeleton style="border: 1px solid #ccc; border-radius: 5px" :class="[
            shelfRuleForm.templateStyle == 1 ? 'rotate90deg' : '',
            shelfRuleForm.templateStyle == 2 ? 'square' : '',
          ]">
            <template slot="template">
              <div style="padding: 17px; display: flex; justify-content: center; align-items: center">
                <el-skeleton-item variant="p" style="width: 50%" />
              </div>
            </template>
          </el-skeleton>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="shelfSubmitForm">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  queryShelfTemp,
  queryRFIDFieldBox,
  queryRFIDFieldArchive,
  queryShelfLabelMeta,
  queryCatalogueTemp,
  queryCoverTemp,
  edit,
} from '@/api/sys/template'
import DownloadFile from '@/components/downloadFile.vue'
import UploadFile from '@/components/uploadFile.vue'
import Sortable from 'sortablejs'
export default {
  name: 'shelfTemplate',
  components: { DownloadFile, UploadFile },
  data() {
    return {
      shelfRuleForm: {},
      shelfRules: {
        zyType: [{ required: true, message: '请选择面类型', trigger: 'change' }],
        templateStyle: [{ required: true, message: '请选择模版样式', trigger: 'blur' }],
        templateName: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
        labelWidth: [{ required: true, message: '请输入标签宽度', trigger: 'blur' }],
        labelLength: [{ required: true, message: '请输入标签长度', trigger: 'blur' }],
      },
      shelfFieldOptions: [],
      shelfHasList: [],
      zyTypeOptions: [
        {
          label: 'AB面',
          value: 0,
        },
        {
          label: '左右面',
          value: 1,
        },
        {
          label: 'A面',
          value: 2,
        },
        {
          label: 'B面',
          value: 3,
        },
        {
          label: '左面',
          value: 4,
        },
        {
          label: '右面',
          value: 5,
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.rowDrop()
  },
  methods: {
    rowDrop() {
      // 实现行拖拽
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        //  指定父元素下可被拖拽的子元素
        draggable: '.draggable .el-table__row',
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.shelfRuleForm.shelfFields.splice(oldIndex, 1)[0]
          _this.shelfRuleForm.shelfFields.splice(newIndex, 0, currRow)
        },
      })
    },
    queryShelfTemp() {
      queryShelfTemp()
        .then((res) => {
          if (res.data.code == 200) {
            this.shelfRuleForm = res.data.data

            if (this.shelfRuleForm.shelfFields.length > 0) {
              this.shelfRuleForm.shelfFields.forEach((row) => {
                if (this.shelfFieldOptions.some((item) => item.fieldId === row.fieldId)) {
                  this.shelfHasList.push(row.fieldId)
                }
              })
            }
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    queryShelfLabelMeta() {
      queryShelfLabelMeta()
        .then((res) => {
          if (res.data.code == 200) {
            this.shelfFieldOptions = res.data.data
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    selectShelfChange(e, row) {
      if (this.$refs['shelf' + row.pieceId].value === undefined) {
        this.shelfHasList.push(e)
      } else {
        this.shelfHasList = this.shelfHasList.filter(
          (item) => item !== this.$refs['shelf' + row.pieceId].value
        )
        this.shelfHasList.push(e)
      }
      if (e === '') {
        // this.boxRuleForm.fields中和row相同的一条数据的fieldTitle为空
        this.shelfRuleForm.shelfFields.forEach((item) => {
          if (item.pieceId === row.pieceId) {
            item.fieldTitle = ''
          }
        })
      } else {
        this.shelfRuleForm.shelfFields.forEach((item) => {
          if (item.pieceId === row.pieceId) {
            item.fieldTitle = this.shelfFieldOptions.filter(
              (item) => item.fieldId === e
            )[0].fieldTitle
            item.fieldName = this.shelfFieldOptions.filter(
              (item) => item.fieldId === e
            )[0].fieldName
          }
        })
      }
    },
    deleteShelf(row) {
      this.shelfRuleForm.shelfFields = this.shelfRuleForm.shelfFields.filter(
        (item) => item.pieceId !== row.pieceId
      )
      this.shelfHasList = this.shelfHasList.filter((item) => item !== row.fieldId)
    },
    addShelf() {
      // this.shelfRuleForm.shelfFields添加一条空数据
      this.shelfRuleForm.shelfFields.push({
        pieceId: new Date().getTime().toString() + Math.floor(Math.random() * 100).toString(),
        templateId: this.shelfRuleForm.templateId,
        fieldId: '',
        fieldTitle: '',
        fieldName: '',
        dataType: '',
        nameSeparator: '',
        codeSeparator: '',
        nameFormat: '',
        codeFormat: '',
      })
    },
    shelfSubmitForm() {
      this.$refs['shelfRuleForm'].validate((valid) => {
        if (valid) {
          // 表格中的打印字段不能存在空值
          if (this.shelfRuleForm.shelfFields.some((item) => item.fieldId === '')) {
            this.$message.warning('请选择数据块')
            return
          }
          this.shelfRuleForm.shelfFields.forEach(
            (item, index) =>
              //  将sortOrder这个值改为数组的索引
              (item.sortOrder = index)
          )
          edit(this.shelfRuleForm)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.message)
              }
            })
            .catch((err) => {
              this.$message.error(err)
            })
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.el-tabs--border-card>.el-tabs__content {
  padding: 7px;
}

.el-card__body {
  height: 8.5rem
    /* 500/192 */
  ;
}

.labelWidth {
  width: 100%;
}

.tableWidth {
  width: 80%;
}

.example {
  display: flex;
  flex-direction: column;

  .el-form-item__content {
    margin: 10px 0 0 10px !important;
  }
}

.fieldsTable {
  .el-form-item__content {
    margin: 0 0 0 10px !important;
  }
}

.el-skeleton__item {
  display: block;
  height: 20px;
}

.rotate90deg {
  transform: rotate(90deg);
  transform-origin: 50px 50px;
  width: 70%;
}

.square {
  height: 300px;
}

.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  cursor: move;
}
</style>
